<script setup lang="ts">
import { onMounted, ref, watch, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
  options: Object
});

const chartRef = ref(null);
let myChart = null;

onMounted(() => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    myChart.setOption(props.options);
    window.addEventListener('resize', () => {
      myChart.resize();
    })
  }
});

watch(() => props.options, (newOptions) => {
  if (myChart) {
    myChart.setOption(newOptions);
  }
});

onUnmounted(() => {
  if (myChart) {
    myChart.dispose(); // 销毁实例，释放资源
    myChart = null;
  }
});
</script>

<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>

<style scoped>

</style>